// import React from 'react';
// const Products = (prop) => (
//   <div style={{ textAlign: 'center' }}>
//     <h2>List of Products.</h2>
//   </div>
// )
// export default Products;


import React from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import ProductList from '../components/ProductList';

// dispatch由connect函数连接后传入。products是dva注册了model后，由connect连接后可以访问到该model。
const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete', // 触发reducers
      payload: id,
    });
  }
  return (
    <div style={{ backgroundColor: '#efefef', padding: '50px' }}>
      <Card bordered>
        <h2 style={{ textAlign: 'center' }}>List of Products</h2>
        <ProductList onDelete={handleDelete} products={products} />
      </Card>
    </div>
  );
};

// 这里的connect就是redux中的connect，dispatch函数就是通过connect连接组件和model后，传进组件的函数，用于触发action或reducers。
// 这里connect函数连接了Products组件和products的model，返回一个app实例，再暴露出去。
export default connect(({ products }) => ({
  products,
}))(Products);